

<template>
  <div>
    <!-- -------------------表格----------------- -->
    <el-form :inline="true" :model="formInline" class="demo-form-inline">
      <el-form-item>
        <el-input
          v-model="formInline.codingName"
          placeholder="请输入编码名称/前缀"
          clearable
        />
      </el-form-item>
      <el-form-item>
        <el-select
          v-model="formInline.targetForm"
          placeholder="请选择目标表单"
          clearable
        >
          <el-option label="生产计划" value="生产计划" />
          <el-option label="物料管理" value="物料管理" />
          <el-option label="过程检验" value="过程检验" />
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-select
          v-model="formInline.generateType"
          placeholder="请选择生成类型"
          clearable
        >
          <el-option label="全部" value="0" />
          <el-option label="每天" value="1" />
          <el-option label="递增" value="2" />
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="hendleSerch">查询</el-button>
      </el-form-item>
    </el-form>
    <el-button  @click="CodingPull">导出</el-button>
    <el-table
      ref="multipleTableRef"
      :data="tableData"
      style="width: 100%"
      @selection-change="handleSelectionChange"
    >
      <el-table-column type="radiotion" width="55" />
      <el-table-column type="index" width="50" />
      <el-table-column property="targetForm" label="目标表单" width="100" />
      <el-table-column property="codingName" label="编码名称" width="100" />
      <el-table-column property="codingProd" label="编号前缀" width="100" />
      <el-table-column property="timeRule" label="时间规则" width="100" />
      <el-table-column
        property="initialNumber"
        label="初始流水号"
        width="100"
      />
      <el-table-column property="generateType" label="生成类型" width="100" />
      <el-table-column property="initialLong" label="流水号长度" width="100" />
      <el-table-column property="stepSize" label="步长" width="100" />
      <el-table-column property="codingPreview" label="编号预览" width="130" />
      <el-table-column
        property="codingGenerateRule"
        label="编码生成规则"
        width="240"
      />
      <el-table-column label="操作">
        <template #default="scope">
          <el-button size="small" @click="handleEdit(scope.$index, scope.row)"
            >编辑</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <div class="demo-pagination-block">
      <el-pagination
        v-model:current-page="query.pageindex"
        v-model:page-size="query.pagesize"
        :page-sizes="[5, 10, 15, 20]"
        :small="small"
        :disabled="disabled"
        :background="background"
        layout="total, sizes, prev, pager, next, jumper"
        :total="totalCount"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>
    <div style="margin-top: 20px">
      <el-button @click="toggleSelection()">取消选择</el-button>
    </div>
    <!-- -------------------表格结束----------------- -->

    <!-- -----------------弹出修改------------------- -->
    <el-dialog v-model="editVisible" title="编辑">
      <el-form :model="form" ref="ruleFormRef" :rules="rules">
        <el-form-item
          label="目标表单"
          :label-width="formLabelWidth"
          prop="targetForm"
        >
          <el-input
            v-model="form.targetForm"
            autocomplete="off"
            :disabled="true"
          />
        </el-form-item>
        <el-form-item label="编码名称" :label-width="formLabelWidth">
          <el-input
            v-model="form.codingName"
            autocomplete="off"
            :disabled="true"
          />
        </el-form-item>
        <el-form-item label="前戳编号" :label-width="formLabelWidth">
          <el-input v-model="form.codingProd" autocomplete="off" />
        </el-form-item>
        <el-form-item
          label="时间规则"
          :label-width="formLabelWidth"
          prop="TimeRule"
        >
          <el-select v-model="form.timeRule" placeholder="--请选择--">
            <el-option label="年-YYYY" value="yyyy"/>
            <el-option label="年月-YYYYMM" value="yyyyMM" />
            <el-option label="年月日-YYYYMMDD" value="yyyyMMdd" />
            <el-option label="年月日时-YYYYMMDDHH" value="yyyyMMddhh" />
            <el-option label="年月日时分-YYYYMMDDHHMM" value="yyyyMMddhhmm" />
            <el-option
              label="年月日时分秒-YYYYMMDDHHMMSS"
              value="yyyyMMddhhmmss"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="生成类型" :label-width="formLabelWidth">
          <el-radio-group v-model="form.generateType">
            <el-radio label="每天" />
            <el-radio label="递增" />
          </el-radio-group>
        </el-form-item>
        <el-form-item
          label="初始流水号"
          :label-width="formLabelWidth"
          prop="InitialNumber"
        >
          <el-input v-model="form.initialNumber" autocomplete="off" />
        </el-form-item>
        <el-form-item
          label="流水号长度"
          :label-width="formLabelWidth"
          prop="InitialLong"
        >
          <el-input v-model="form.initialLong" autocomplete="off" />
        </el-form-item>
        <el-form-item
          label="步长"
          :label-width="formLabelWidth"
          prop="StepSize"
        >
          <el-input v-model="form.stepSize" autocomplete="off" />
        </el-form-item>
        <el-form-item
          label="编码生成规则"
          :label-width="formLabelWidth"
          prop="CodingGenerateRule"
        >
          <el-input v-model="form.codingGenerateRule" autocomplete="off" />
        </el-form-item>
        <el-form-item label="编号预览" :label-width="formLabelWidth">
          <el-input v-model="form.codingPreview" autocomplete="off" />
        </el-form-item>
        <el-form-item label="当前编号" :label-width="formLabelWidth">
          <el-input v-model="form.current_Number" autocomplete="off" />
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="editVisible = false">取消</el-button>
          <el-button type="primary" @click="saveEdit(ruleFormRef)">
            确定
          </el-button>
        </span>
      </template>
    </el-dialog>
    <!-- -----------------弹出修改结束------------------- -->
  </div>
</template>
  
<script>
import { ref, reactive } from "vue";
import { ElMessage, ElMessageBox } from "element-plus";
import { CodingGet, CodingGetId, PutCoding,CodingGetExcel } from "../../api/Coding";
export default {
  name: "basetable",

  setup() {
    const rules = {
      InitialNumber: [
        { required: true, message: "请输入初始流水号", trigger: "blur" },
        { pattern: /^\d+$/, message: "只能输入数字", trigger: "blur" },
      ],
      TimeRule: [
    {
      required: true,
      message: '请选择时间规则',
      trigger: 'change',
    },
  ], 
      InitialLong: [
        { required: true, message: "请输入流水号长度", trigger: "blur" },
        { pattern: /^\d+$/, message: "只能输入数字", trigger: "blur" },
      ],
      StepSize: [
        { required: true, message: "请输入步长", trigger: "blur" },
        { pattern: /^\d+$/, message: "只能输入数字", trigger: "blur" },
      ],
      CodingGenerateRule: [
        { required: true, message: "请输入编码生成规则", trigger: "blur" },
      ],
    };
    const query = reactive({
      pageindex: 1,
      pagesize: 10,
      codingName: "",
      generateType: "",
      targetForm: "",
    });
    //文本验证

    const tableData = ref([]);
    const totalCount = ref(0);
    // 获取表格数据
    const getData = () => {
      CodingGet(query).then((res) => {
        tableData.value = res.result.items;
        totalCount.value = res.result.totalCount || 50;
      });
    };
    getData();
    // 查询操作
    const handleSearch = () => {
      query.codingName = formInline.codingName;
      getData();
    };
    const formInline = reactive({
      codingName: "",
      generateType: "",
      targetForm: "",
    });
    //导出CodingRule
    const CodingPull=()=>{
      CodingGetExcel().then((res)=>{
          if(res){
            const elink=document.createElement("a");
            elink.download="编码规则.xlsx";
            elink.style.display="none";
            const blob=new Blob([res],{type:"application/x-msdownload"});
            elink.href=URL.createObjectURL(blob);
            document.body.appendChild(elink);
            elink.click();
            document.body.removeChild(elink);
          }
          else
          {
            ElMessage.error("导出失败");
          }
      })
    };
    // 分页导航
    const handleSizeChange = (val) => {
      query.pagesize = val;
      getData();
    };
    // 分页导航
    const handleCurrentChange = (val) => {
      query.pageindex = val;
      getData();
    };
    // 删除操作
    const handleDelete = (index) => {
      // 二次确认删除
      ElMessageBox.confirm("确定要删除吗？", "提示", {
        type: "warning",
      })
        .then(() => {
          ElMessage.success("删除成功");
          tableData.value.splice(index, 1);
        })
        .catch(() => {});
    };
    const ruleFormRef = ref(null);
    // 表格编辑时弹窗和保存
    const editVisible = ref(false);
    //字段
    let form = reactive({
      targetForm: "",
      codingName: "",
      generateType: "",
      initialNumber: undefined,
    });
    let idx = -1;
    const handleEdit = (index, row) => {
      idx = index;
      CodingGetId(row.id).then((item) => {
        Object.assign(form, item.result);
      });
      editVisible.value = true;
    };
    const saveEdit = () => {
          editVisible.value = false;
          PutCoding(form).then(() => {
          ElMessage.success("修改成功");
            getData();
          });
    };
    return {
      rules,
      query,
      tableData,
      totalCount,
      ruleFormRef,
      CodingPull,
      editVisible,
      form,
      formInline,
      handleSearch,
      handleSizeChange,
      handleCurrentChange,
      handleDelete,
      handleEdit,
      saveEdit,
    };
  },
};
</script>

<style scoped>
.handle-box {
  margin-bottom: 20px;
}

.handle-select {
  width: 120px;
}

.handle-input {
  width: 300px;
  display: inline-block;
}
.table {
  width: 100%;
  font-size: 14px;
}
.red {
  color: #ff0000;
}
.mr10 {
  margin-right: 10px;
}
.table-td-thumb {
  display: block;
  margin: auto;
  width: 40px;
  height: 40px;
}
</style>
